<template>
    <el-row class="home" :gutter="20">
        <!-- 左侧界面 -->
        <el-col :span="8" style="margin-top: 20px">
            <!-- 个人名片 -->
            <el-card shadow="hover">
                <div class="user">
                    <img :src="userImg">
                    <div class="userinfo">
                        <p class="name">彭思杭</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间：<span>2022-2-22</span></p>
                    <p>上次登录地点：<span>东莞</span></p>
                </div>
            </el-card>
            <!-- 数据表格 -->
            <el-card style="margin-top:20px ; height:460px">
                <!-- 数据清单 -->
                <el-table :data="tableData">
                    <!-- 遍历输出的数据与数据清单中的数据key要一致 -->
                    <el-table-column 
                    v-for="(val,key) in tableLabel" 
                    :key="key" 
                    :prop="key" 
                    :label="val"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <!-- 右侧界面 -->
        <el-col  :span="16" style="margin-top:30px">
            <!-- 右上 -->
            <div class="num">
                <el-card  v-for="item in countData" :key="item.name" :body-style="{display:flex,padding:10}">
                    <div class="icon" :class="`el-icon-${item.icon}`" :style="`background: ${item.color}`" ></div>
                    <div class="detail">
                        <p class="num">￥{{item.value}}</p>
                        <p class="txt">{{item.name}}</p>
                    </div>
                </el-card>
            </div>
            <!-- 右中 -->
            <!-- 折线图 -->
             <el-card style="height:280px ; margin-top:25px">
                 <!-- <div style="height:280px" ref="echarts"></div> -->
                 <echart :chartData="echartData.order" style="height:280px" />
             </el-card>
             <div class="graph">
                 <!-- 柱状图 -->
                 <el-card style="height:260px ; width:49%" >
                     <!-- <div style="height:240px" ref="userBar"></div> -->
                     <echart :chartData="echartData.user" style="height:240px"/>
                 </el-card>
                 <!-- 饼状图 -->
                 <el-card style="height:260px ; width:49%">
                     <!-- <div style="height:240px" ref="brandPie"></div> -->
                     <echart :chartData="echartData.video" :isAxisChart="false" style="height:240px"/>
                 </el-card>
             </div>
        </el-col>
    </el-row>
</template>
<script>
import {getMenu} from '../../api/data.js'
import {getData} from '../../api/data.js'
// 无版本引入 * as
import * as echarts from 'echarts'
import Echart from '../../src/components/ECharts.vue'

export default {
    name:'home',
    components:{
        Echart
    },
    tableData:[],
    data(){
        return{
            userImg:require("../../src/assets/images/user.jpg"),
            tableData:[
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            }
            ],
            tableLabel:{
                name:'品牌',
                todayBuy:'今日购买',
                monthBuy:'本月购买',
                totalBuy:'总购买'
            },
            countData: [
            {
            name: "今日支付订单",
            value: 1234,
            icon: "success",
            color: "#2ec7c9",
            },
            {
            name: "今日收藏订单",
            value: 210,
            icon: "star-on",
            color: "#ffb980",
            },
            {
            name: "今日未支付订单",
            value: 1234,
            icon: "s-goods",
            color: "#5ab1ef",
            },
            {
            name: "本月支付订单",
            value: 1234,
            icon: "success",
            color: "#2ec7c9",
            },
            {
            name: "本月收藏订单",
            value: 210,
            icon: "star-on",
            color: "#ffb980",
            },
            {
            name: "本月未支付订单",
            value: 1234,
            icon: "s-goods",
            color: "#5ab1ef",
            },
            ],
            echartData:{
                order:{
                    xData:[],
                    series:[]
                },
                user:{
                    xData:[],
                    series:[]
                },
                video:{
                    series:[]
                }
            }
        }
    },
    mounted(){
        //获得请求
        getMenu().then(res =>{
            console.log(res)
        }),
        //获得数据请求
        getData().then(res =>{
            //解构
            const { code,data } = res.data
            if(code == 20000){
                //绘制折线图，主要是定义配置
                this.tableData = data.tableData
                const order = data.orderData
                const xData = order.date
                const keyArray =  Object.keys(order.data[0])
                const series = []
                keyArray.forEach(key => {
                    series.push({
                        name: key,
                        data: order.data.map(item => item[key]),
                        type: 'line'
                    })
                })
                // const option = {
                //     xAxis : {
                //         data:xData
                //     },
                //     yAxis : {

                //     },
                //     legend:{
                //         data:keyArray
                //     },
                //     series
                // }
                // //初始化echarts实例，绑定ref
                // const E =echarts.init(this.$refs.echarts)
                // //传入配置
                // E.setOption(option)
                this.echartData.order.title = data.orderData.date.title
                this.echartData.order.xData = xData
                this.echartData.order.series = series

                //用户柱状图配置
                // const useroption = {
                //     legend: {
                //         // 图例文字颜色
                //         textStyle: {
                //         color: "#333",
                //         },
                //     },
                //     grid: {
                //         left: "20%",
                //     },
                //     // 提示框
                //     tooltip: {
                //         trigger: "axis",
                //     },
                //     xAxis: {
                //         type: "category", // 类目轴
                //         data: data.userData.map(item => item.date),
                //         axisLine: {
                //         lineStyle: {
                //             color: "#17b3a3",
                //         },
                //         },
                //         axisLabel: {
                //         interval: 0,
                //         color: "#333",
                //         },
                //     },
                //     yAxis: [
                //         {
                //         type: "value",
                //         axisLine: {
                //             lineStyle: {
                //             color: "#17b3a3",
                //             },
                //         },
                //         },
                //     ],
                //     color: ["#2ec7c9", "#b6a2de"],
                //     series: [
                //         {
                //         name: '新增用户',
                //         data: data.userData.map(item => item.new),
                //         type: 'bar'
                //         },
                //         {
                //         name:'活跃用户',
                //         data: data.userData.map(item => item.active),
                //         type:'bar'
                //         }
                //     ],
                // }
                // const userBar = echarts.init(this.$refs.userBar)
                // userBar.setOption(useroption)
                this.echartData.user.xData = data.userData.map(item => item.date)
                this.echartData.user.series = [
                        {
                        name: '新增库存',
                        data: data.userData.map(item => item.new),
                        type: 'bar'
                        },
                        {
                        name: '新增销量',
                        data: data.userData.map(item => item.newsale),
                        type: 'bar'
                        }
                    ]
                //用户饼图配置,与柱状图略有不同
                // const pieoption = {
                //     tooltip: {
                //         trigger: "item",
                //     },
                //     color: [
                //         "#0f78f4",
                //         "#dd536b",
                //         "#9462e5",
                //         "#a6a6a6",
                //         "#e1bb22",
                //         "#39c362",
                //         "#3ed1cf",
                //     ],
                //     series: [
                //         {
                //             data:data.videoData,
                //             type:'pie'
                //         }
                //     ],
                // }
                // const brandPie = echarts.init(this.$refs.brandPie)
                // brandPie.setOption(pieoption)
                this.echartData.video.series = [
                    {
                        data:data.videoData,
                        type:'pie'
                    }
                ]
            }   
            console.log(res)
        })
    }
}
</script>
<style lang="less" scoped>
@import url("../../src/assets/less/home.less");
</style>